<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.5.7/vue.min.js"></script>
  <style>
    .completed {
      text-decoration: line-through;
    }

    li {
      cursor: pointer;
    }

    .num_list {
      display: flex;
    }

    .num_list li {
      margin-right: 40px;
    }

    .active {
      color: red;
    }
  </style>
</head>

<body>
  <div id="app">
    <small>{{ title }}</small>
    <ul class="num_list">
      <li @click="currentStatus = 'ALL'" :class="{active: currentStatus === 'ALL'}">
        总全部：{{ todoList.length }}
      </li>
      <li @click="currentStatus = 'COMPLETED'" :class="{active: currentStatus === 'COMPLETED'}">
        已完成：{{ completedNum }}
      </li>
      <li @click="currentStatus = 'TODO'" :class="{active: currentStatus === 'TODO'}">
        未完成：{{ todoList.length - completedNum }}
      </li>
    </ul>

    <ol>
      <li
        class="todo"
        v-for="(todo, index) in todoList"
        :class="{ completed: todo.completed }"
        @click="todo.completed = !todo.completed"
      >
        {{ todo.text }}
        <button @click="deleteTodo(index)">删除</button>
      </li>
    </ol>
  </div>

  <script>
    new Vue({
      el: '#app',
      data: {
        currentStatus: 'ALL', // 'ALL、COMPLETED、TODO'
        title: '完成状态颜色切换',
        todoList: [
          {
            text: '明天去洗澡',
            completed: false,
          },
          {
            text: '早上跑步',
            completed: true,
          },
          {
            text: '下午看完视频',
            completed: false,
          },
          {
            text: '晚上跑步',
            completed: false,
          },
        ],
      },

      computed: {
        completedNum() {
          const completedList = this.todoList.filter(function(item) {
            return item.completed === true
          })
          return completedList.length
        }
      },

      methods: {
        deleteTodo(index) {
          this.todoList.splice(index, 1)
        },
      }
    })
  </script>
</body>

</html>
